/* Thème "bulle" */
/* Utilise des bulles flottantes, verre dépoli et accents doux */

:root{
    --bg-1: #e0f7ff;
    --bg-2: #c7e9f5;
    --accent: #00d4ff;
    --accent-2: #5ae6ff;
    --text: #1e5f99;
    --muted: #5a7a9d;
    --muted-2: #2c3e50;
    --glass: rgba(255,255,255,0.85);
    --shadow: 0 12px 30px rgba(30,95,153,0.15);
    --shadow-hover: 0 16px 40px rgba(30,95,153,0.25);
    --radius: 16px;
    --link: #007bff;
    --transition: all 0.4s cubic-bezier(0.25, 0.45, 0.45, 0.95);
    --transition-1: all 0.2s ease;
    --highlight: #ff6b9d;
}

/* page */
html,body{
    height:100%;
    margin:0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: radial-gradient(800px 360px at 10% 10%, var(--bg-2), transparent 20%),
                radial-gradient(600px 300px at 90% 90%, var(--bg-1), transparent 15%),
                linear-gradient(180deg,#f0f9ff 0%, #e0f2ff 50%, #d1ecff 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    padding-bottom:48px;
}

/* conteneur */
.container{
    max-width:1100px;
    margin:36px auto;
    padding:26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px) saturate(120%);
    position:relative;
    z-index:1;
    transition: var(--transition);
}

.container:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* header */
.brand{display:flex;gap:18px;align-items:center}
.logo-bubble{
    width:84px;height:84px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:22px;
    background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2));
    box-shadow: 0 8px 20px rgba(127,211,255,0.18), inset 0 -6px 18px rgba(255,255,255,0.06);
    transition: var(--transition);
}

.logo-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(127,211,255,0.25);
}

.title{margin-top: auto; color:var(--text); font-size:22px; margin:0}
.lead{color:var(--muted);margin-top:6px}
.team-meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.badge{background:rgba(11,35,64,0.04);padding:6px 10px;border-radius:10px;font-size:13px;color:var(--muted); transition: var(--transition);}

.badge:hover {
    background: rgba(11,35,64,0.08);
    transform: translateY(-1px);
}

/* Grid des membres */
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:14px;align-items:stretch;grid-auto-rows:1fr} /* 3 membres en ligne sur desktop - rows égales */

/* Position the 4th member on the left under the 3 columns on desktop */
@media (min-width:901px){
  .grid > *:nth-child(4){ grid-column: 1 / 2; }
}
.bubble-card{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:14px;background:var(--glass);box-shadow:0 8px 22px rgba(7,32,51,0.06); transition: var(--transition);min-height:220px;width:100%;box-sizing:border-box;position:relative;z-index:2;overflow:hidden;height:100%;}
/* make sure info column doesn't force extra height and keeps layout */
.bubble-card .info{min-height:1px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between} 

.bubble-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px);
    background: rgba(255,255,255,0.88);
}

.avatar{width:140px;height:140px;min-width:140px;min-height:140px;border-radius:50%;object-fit:cover;flex:0 0 140px;flex-shrink:0;box-shadow:0 12px 30px rgba(7,32,51,0.09); transition: var(--transition);display:block;overflow:hidden;} 

/* Prevent images from overflowing their card */
.bubble-card img{max-width:100%;height:auto;display:block}

.avatar:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(7,32,51,0.12);
}

.info{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.name{margin:0;font-weight:700;font-size:17px; color:var(--muted-2)}
.role{margin:6px 0;color:var(--muted-2);font-size:14px}
.bio{margin-top:8px;color:var(--muted)}
.image-large{width:320px;border-radius:12px;box-shadow:0 8px 18px rgba(7,32,51,0.06);margin-top:12px;}
.links{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;color:var(--text);align-items:center}
.links .link{padding:8px 12px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#f0fbff);text-decoration:none;color:var(--muted);font-weight:600;border:1px solid rgba(7,32,51,0.04); transition: var(--transition);}
.links .link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(7,32,51,0.1);background:linear-gradient(180deg,#f0fbff,#f4fdff);border-color: rgba(7,32,51,0.1);} 
.footer{margin-top:26px;color:var(--muted)}
.link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(7,32,51,0.1);background:linear-gradient(180deg,#f0fbff,#f4fdff);border-color: rgba(7,32,51,0.1);}

/* Section titles */
.section-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(45deg, var(--accent), var(--highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.subsection-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 12px;
    border-left: 4px solid var(--accent);
    padding-left: 12px;
}

/* Formulaire de contact */
/* Le conteneur contact suit la même largeur que les autres .container */
.contact .container{max-width:1100px;margin:0 auto;padding:0 12px}
.contact-form {
  width:100%;
  max-width: 900px; /* largeur du formulaire à l'intérieur du container */
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,255,255,0.9));
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(30,95,153,0.08);
  border: 1px solid rgba(7,32,51,0.04);
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr; /* 1 colonne par défaut (mobile/tablette) */
}

/* Desktop: deux colonnes, textarea et actions prennent toute la largeur */
@media (min-width:900px){
  .contact-form{ grid-template-columns: 1fr 1fr; }
  .contact-form textarea{ grid-column: 1 / -1; }
  .form-actions{ grid-column: 1 / -1; }
}

.contact-intro { text-align:center; color:var(--muted); margin-bottom:6px; font-size:15px; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--muted-2); font-size:15px }
.form-group input, .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(7,32,51,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
  transition: var(--transition);
  font-size:15px;
  box-shadow: none;
}
.form-group textarea { min-height:160px; resize:vertical; padding-top:12px }

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0,212,255,0.08);
  outline: none;
}

.form-actions { display:flex; justify-content:flex-end; }
.contact .form-actions .link { min-width:140px }

button.link {
  padding: 12px 26px;
  border-radius: 20px;
  background: linear-gradient(45deg, var(--accent), var(--highlight));
  color: white;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 14px rgba(0,212,255,0.28);
}

button.link:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,212,255,0.36);
  background: linear-gradient(45deg, var(--highlight), var(--accent));
}

@media (max-width:600px){
  .contact-form{padding:18px}
  .form-actions{justify-content:center}
  .contact .form-actions .link{width:100%}
}

/* Images responsives */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: var(--transition);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(30,95,153,0.1);
  border: 2px solid rgba(255,255,255,0.5);
}

main img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(30,95,153,0.2);
  border-color: var(--accent);
}

/* Photo gallery for multiple images */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.photo-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30,95,153,0.15);
  transition: var(--transition-1);
}

.photo-gallery img:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 10px 25px rgba(30,95,153,0.25);
}

/* Footer */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}

.footer-item {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  box-shadow: 0 6px 18px rgba(7,32,51,0.06);
  transition: var(--transition);
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(7,32,51,0.04);
  flex: 0 1 220px;
  min-width:180px;
}

.footer-item img, .sponsor-logo {
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.5);
}

.footer-item span { font-weight:600; }

.footer-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  background: linear-gradient(180deg,#fff,#f4fdff);
  color: var(--muted-2);
}

.footer-content a {
  transition: var(--transition);
}

.footer-content a:hover {
  color: var(--link);
}

/* Sponsors list */
.sponsors {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.sponsor-logo{ width:56px; height:56px; object-fit:cover; border-radius:8px }

/* Single images inside articles */
.standalone-photo {
  max-width: 720px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(7,32,51,0.06);
  margin: 12px auto;
  display: block;
}

/* Responsive tweaks */
@media (max-width:900px){
  .footer-item{ flex: 1 1 48%; min-width:40%; }
  .footer-links, .sponsors{ justify-content:center }
  .container{ padding-left:18px; padding-right:18px }
}

@media (max-width:600px){
  .footer-item{ flex: 1 1 100%; min-width:100%; }
  .standalone-photo{ max-width: 100%; }
  .footer-links{ gap:10px }
  .sponsors{ gap:10px }
}

/* Bulle decorative */
.bubble{position:absolute;border-radius:50%;filter:blur(6px);opacity:.9;z-index:0;pointer-events:none;transform:translate3d(0,0,0)}
.bubble.small{width:56px;height:56px;background:radial-gradient(circle at 30% 30%, #87bfd3,#73c9eb)}
.bubble.med{width:120px;height:120px;background:radial-gradient(circle at 30% 30%, #9adaec,#78c8e6)}
.bubble.large{width:220px;height:220px;background:radial-gradient(circle at 30% 30%, rgba(0,212,255,0.2), rgba(90,230,255,0.15))}


@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
@keyframes floatX{0%{transform:translateX(0)}50%{transform:translateX(12px)}100%{transform:translateX(0)}}
.float-slow{animation:floatY 9s ease-in-out infinite}
.float-med{animation:floatY 6.5s ease-in-out infinite}
.float-side{animation:floatX 10s ease-in-out infinite}

/* Lightbox styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    transition: var(--transition);
}
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
}

.close:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Responsive */
@media (max-width:1200px){
    .container{max-width:95%;padding:24px}
    .photo-gallery{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
}

@media (max-width:900px){
    .grid{grid-template-columns:repeat(2,1fr)} /* 2 colonnes sur tablette */
    .logo-bubble{width:64px;height:64px;font-size:18px}
    .avatar{width:110px;height:110px;min-width:110px;min-height:110px;flex:0 0 110px}
    .container{margin:18px auto;padding:16px}
    .bubble-card{flex-direction:column;text-align:center;align-items:center;min-height:190px}
    .bubble-card .info{align-items:center;text-align:center}
    .avatar{margin:0 auto}
    .section-title{font-size:24px}
    .subsection-title{font-size:18px}
    .photo-gallery{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px;}
    /* reduce decorative bubbles on tablet */
    .bubble.large{width:160px;height:160px}
    .bubble.med{width:90px;height:90px}
    .bubble.small{width:40px;height:40px}
    .footer-item{flex:1 1 45%}
}

@media (max-width:600px){
    .container{max-width:95%;padding:12px;margin:12px auto}
    .logo-bubble{width:56px;height:56px;font-size:16px}
    .title{font-size:18px}
    .name{font-size:15px}
    .role{font-size:13px}
    .bio{font-size:14px}
    .close{font-size:30px;top:10px;right:15px}
    .lightbox img{max-width:95%;max-height:95%}
    .footer-content{flex-direction:column;text-align:center}
    .section-title{font-size:20px;margin-bottom:16px}
    .subsection-title{font-size:16px;margin-top:20px}
    .photo-gallery{grid-template-columns: 1fr; gap:8px;}
    .photo-gallery img{height:150px}
    .form-group input, .form-group textarea{font-size:14px}
    button.link{padding:12px 20px;font-size:14px}
    /* hide big decorative bubble on phones and scale small ones */
    .bubble.large{display:none}
    .bubble.med{width:70px;height:70px}
    .bubble.small{width:30px;height:30px}
    .avatar{width:96px;height:96px;min-width:96px;min-height:96px;flex:0 0 96px}
    .bubble-card{padding:12px;min-height:140px}
    .bubble-card .info{align-items:center;text-align:center}
    .footer-item{flex:1 1 100%; min-width:100%}
    .sponsor-logo{width:46px;height:46px}
    button.link{width:100%}
    /* increase gap to avoid any visual overlap between cards */
    .grid{grid-template-columns: 1fr; gap:22px}
}

@media (max-width:480px){
    .container{padding:8px}
    .brand{flex-direction:column;text-align:center;gap:12px}
    .logo-bubble{margin:0 auto}
    .title{font-size:16px}
    .lead{font-size:14px}
    .team-meta{flex-direction:column;gap:6px}
    .badge{font-size:12px;padding:4px 8px}
    .section-title{font-size:18px}
    .subsection-title{font-size:14px}
    .bio{font-size:13px}
    .photo-gallery img{height:120px}
    .form-group{margin-bottom:12px}
    .form-group input, .form-group textarea{padding:8px;font-size:13px}
    button.link{padding:10px 16px;font-size:13px}
    .footer-content{gap:12px}
}